<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <script src="../../element-ui/lib/index.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
</head>
<style>

</style>

<body>

<div id="app">
    <el-input v-model="searchText" placeholder="请输入搜索内容" style="width: 200px" @keyup.enter="handleSearch"></el-input>
    <el-select v-model="searchType" placeholder="选择搜索类型" style="width: 150px">
        <el-option label="按书名搜索" value="name"></el-option>
        <el-option label="按借阅者账号搜索" value="adminName"></el-option>
        <el-option label="按借阅者姓名搜索" value="username"></el-option>
        <el-option label="按书籍号搜索" value="card"></el-option>
    </el-select>
    <el-button type="primary" @click="handleSearch">搜索</el-button>

    <el-table style="padding: 20px" :data="tableData" stripe>
        <el-table-column prop="bookName" label="书籍名">
        </el-table-column>
        <el-table-column prop="card" label="书籍号">
        </el-table-column>

        <el-table-column prop="beginTime" label="借书日期">
        </el-table-column>
        <el-table-column prop="endTime" label="截至日期">
        </el-table-column>
        <el-table-column label="是否归还">
            <template slot-scope="scope">
                <span v-if="scope.row.status === 2">已归还</span>
                <span v-else>借阅中</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
            <template slot-scope="scope">
                <el-button type="text" size="small" class="blueBug" @click="deleteHis(scope.row)">
                    删除记录
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
    ></el-pagination>
</div>

</body>

<script>
    let myVue = new Vue({
        el: '#app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                status: '',
                searchText: '',
                searchType: 'name',
            };
        },
        computed: {},
        created() {
            this.init();
            //this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted() {
        },
        methods: {
            async init() {
                let params = {
                    page: this.page,
                    pageSize: this.pageSize
                };

                if (this.searchText) {
                    if (this.searchType === 'name') {
                        params.name = this.searchText;
                    } else if (this.searchType === 'card') {
                        params.card = this.searchText;
                    } else if (this.searchType === 'adminName') {
                        params.adminName = this.searchText;
                    } else if (this.searchType === 'username') {
                        params.username = this.searchText;
                    }
                }

                axios.get("/book_his/his_admin", { params })
                    .then(res => {
                        this.tableData = res.data.data.records.map(record => {
                            const formattedBeginTime = this.formatDate(record.beginTime);
                            const formattedEndTime = this.formatDate(record.endTime);
                            return {
                                ...record,
                                beginTime: formattedBeginTime,
                                endTime: formattedEndTime
                            };
                        });
                        this.counts = res.data.data.total;
                    });
            },
            handleSearch() {
                this.page = 1;
                this.init();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.init();
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            formatDate(dateString) {
                const date = new Date(dateString);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
            deleteHis(row) {
                this.$confirm('确认删除此条记录吗？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/book_his/" + row.hid).then(res => {
                        if (res.data.code === 1) {
                            this.$message.success('删除成功！');
                            this.handleQuery();
                        } else {
                            this.$message.error(res.data.msg || '操作失败');
                        }
                    });
                }).catch(() => {
                    // 如果用户点击了取消按钮，则不执行任何操作
                });
            }
        }
    });
</script>

</html>